<template>
    <container type="top-header" :show="{header:formShow}" class="g-width100 g-height100" header-style="height:auto;" main-style="padding:0;">
        <Form slot="header" inline
              submit-bus-key="PermanentOtherManageList"
              ref="form"
              :form-items="formItems"
              label-width=""
        ></Form>
        <Table slot="main"
               ref="table"
               form-submit-bus-key="PermanentOtherManageList"
               :columns="columns"
               :operations="tableOperations"
               unique-label="name"
               v-on:toolbarSearchClick="formShow = !formShow"
        ></Table>
    </container>
</template>

<script>
    import Container from '../../../../../../common-util/src/components/page/Container.vue'
    import Form from '../../../../../../common-util/src/components/page/Form.vue'
    import Table from '../../../../../../common-util/src/components/page/Table.vue'

    let types = {
        image: '图片',
        video: '视频',
        voice: '语音',
        thumb: '缩略图',
    }
    export default {
        components:{
            Form,
            Table,
            Container
        },
        data(){
            return {
                formShow: true,
                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            select:{
                                url: this.$baseURL.wx + '/wx/mp/config/list',
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            required: true,
                            label: '公众号',
                        }
                    },

                    {
                        field: {
                            name: 'type'
                        },
                        element:{
                            type: 'selectLocal',
                            selectLocal:{
                                // 自调用函数
                                data:(()=>{
                                    let r = []
                                    for (let id in types){
                                        r.push({
                                            id: id,
                                            name: types[id]
                                        })
                                    }
                                    return r
                                })()
                            },
                            required: true,
                            label: '类型',
                        }
                    },
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: 'submit',
                                    requestMethod:'get',
                                    url: this.searchUrl,
                                    label: '查询'
                                }
                            ]
                        }
                    }
                ],
                columns:[
                    {
                        prop: 'mediaId',
                        label:'媒体id',

                    },
                    {
                        prop: 'name',
                        label:'名称'
                    },
                    {
                        prop: 'updateTime',
                        label:'更新时间'
                    },
                    {
                        prop: 'url',
                        label:'url',
                    },
                ],
                tableOperations:[
                    {
                        action: this.toAddPage,
                        label:'添加'
                    },
                    {
                        action: 'delete',
                        url: this.deleteUrl,
                        disabledOnMissingSelect:true,
                        label:'删除'
                    }
                ]
            }
        },
        methods: {
            getAppCode(){
                return this.$refs.form.getFormData().appCode
            },
            getType(){
                return this.$refs.form.getFormData().type
            },
            ensureAppCodeAndType() {
                if(!this.getAppCode() || !this.getType()){
                    this.$message.error('请选择公众号和类型')
                    return false
                }
                return true
            },
            toAddPage(){
                if(this.ensureAppCodeAndType()){
                    this.$router.push({path: '/mpPermanentMaterialOtherAdd', query: {appCode:this.getAppCode(),type: this.getType()}})

                }
            },
            deleteUrl(row){
                if(this.ensureAppCodeAndType()){
                    return this.$baseURL.wx + '/wx/mp/material/'+ this.getAppCode() +'/delete/' + row.mediaId

                }
                return false
            },
            searchUrl(form){
                if(this.ensureAppCodeAndType()){
                    return this.$baseURL.wx + '/wx/mp/material/'+ this.getAppCode() +'/media/' + form.type + '/listPage'
                }
                return false
            }
        }
    }
</script>

<style scoped>

</style>